<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" :inline="true">
      <el-form-item label="公司名称" prop="company">
        <el-input  v-model="form.company" disabled style="width: 280px;"/>
      </el-form-item>

      <el-form-item label="编号" prop="number">
        <el-input v-model="form.number" disabled />
      </el-form-item>
      <el-form-item label="报销日期" prop="reimbursementDate">
        <el-date-picker clearable
                        v-model="form.reimbursementDate"
                        type="datetime"
                        :disabled='isdisabled'
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择报销日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" :disabled='isdisabled' placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="部门" prop="dept">
        <el-input v-model="form.dept" :disabled='isdisabled' placeholder="请输入部门" />
      </el-form-item>
      <el-form-item label="费用类型" prop="costType">
        <el-select v-model="form.costType"
                   @change="costTypeChange"
                   placeholder="请选择费用类型"
                   :disabled="form.costType&&title!='添加差旅费申请'">
          <el-option
            v-for="dict in dict.type.travel_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName" v-if="form.costType=='project_pay'">
        <el-select v-model="form.projectName"
                   :disabled="title!='添加差旅费申请'"
                   placeholder="请选择" clearable>
          <el-option
            v-for="item in projectNameList"
            :key="item.projectName"
            :label="item.projectName"
            :value="item.projectName"
          ></el-option>
        </el-select>
        <!-- <el-input v-model="form.projectName" placeholder="请输入项目名称" :disabled="isDisabled" /> -->
      </el-form-item>
      <div>
        <el-form-item label="出差事由" prop="businessReason" style="width: 100%" class="remarks">
          <el-input :disabled='isdisabled' v-model="form.businessReason" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </div>
      <el-form-item label="开户行名称" prop="nameBank">
        <el-input v-model="form.nameBank" :disabled='isdisabled' placeholder="请输入开户行名称" />
      </el-form-item>
      <el-form-item label="卡号" prop="cardNumber">
        <el-input v-model="form.cardNumber" :disabled='isdisabled' placeholder="请输入卡号" />
      </el-form-item>
      <el-form-item label="附件张数" prop="attachmentNumbers">
        <el-input  type="number" v-model="form.attachmentNumbers" :disabled='isdisabled' placeholder="请输入附件张数" />
      </el-form-item>
      <br>
      <el-form-item label="差旅费清单">
        <el-button
          type="primary"
          :disabled="isdisabled"
          icon="el-icon-plus"
          size="mini"
          @click="applayaddRow(applyList)"
        >添加清单</el-button>
      </el-form-item>
      <el-table
        ref="table"
        :data="applyList"
        style="width: 100%;margin-bottom:0.125rem"
        border
      >
        <el-table-column label="序号" align="center" width="55" prop="xh" type="index"></el-table-column>
        <el-table-column prop="departureEvent" label="出发时间" align="center" width="180">
          <template slot-scope="scope">
            <el-date-picker clearable
                            v-model="scope.row.departureEvent"
                            type="datetime"
                            :disabled='isdisabled'
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择报销日期">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column prop="departurePlace" label="出发地点" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.departurePlace" :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="strength" label="人数" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.strength" :disabled="isdisabled" type="number"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="vehicle" label="交通工具" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.vehicle" :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="transportationFee" label="交通费金额(元)" align="center" width="180">
          <template slot-scope="scope">
            <el-input
              @input="scope.row.transportationFee=scope.row.transportationFee.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
              v-model="scope.row.transportationFee"
              :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="accommodationDays" label="住宿天数" align="center" width="180">
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.accommodationDays" :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="accommodationFee" label="住宿费金额(元)" align="center" width="180">
          <template slot-scope="scope">
            <el-input
              @input="scope.row.accommodationFee=scope.row.accommodationFee.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
              v-model="scope.row.accommodationFee"
              :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="otherName" label="其他费用名称" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.otherName" :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="otherAmount" label="其他费用金额(元)" align="center" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.otherAmount"
                      @input="scope.row.otherAmount=scope.row.otherAmount.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
                      :disabled="isdisabled"></el-input>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="applaydeleteRow(scope.$index, applyList)"
              :disabled="isdisabled"
              size="small"
            >移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item label="交通费总额(元)" prop="transportationFeeTotal" label-width="120px">
        <el-input v-model="form.transportationFeeTotal" disabled placeholder="请输入" />
      </el-form-item>
      <el-form-item label="住宿费总额(元)" prop="accommodationFeeTotal" label-width="120px">
        <el-input v-model="form.accommodationFeeTotal" disabled placeholder="请输入" />
      </el-form-item>
      <el-form-item label="其他费用总额(元)" prop="otherAmountTotal" label-width="130px">
        <el-input v-model="form.otherAmountTotal" disabled placeholder="请输入" />
      </el-form-item>
      <br>
      <el-form-item label="报销总额(人民币大写)" prop="reimbursementTotal" label-width="190px">
        <el-input v-model="form.reimbursementTotal" disabled placeholder="请输入" />
      </el-form-item>
      <el-form-item label="小写" prop="smallLetter">
        <el-input v-model="form.smallLetter" disabled placeholder="请输入" />
      </el-form-item>
      <el-form-item label="预支金额(元)" prop="advanceAmount" label-width="120px">
        <el-input v-model="form.advanceAmount" :disabled='isdisabled' placeholder="请输入预支金额" />
      </el-form-item>
      <el-form-item label="应报销金额(元)" prop="reimbursableAmount" label-width="120px">
        <el-input v-model="form.reimbursableAmount"
                  @input="form.reimbursableAmount=form.reimbursableAmount.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
                  :disabled='isdisabled' placeholder="请输入应报销金额" />
      </el-form-item>
      <el-form-item label="应退回金额(元)" prop="refundAmount" label-width="120px">
        <el-input v-model="form.refundAmount"
                  :disabled='isdisabled'
                  @input="form.refundAmount=form.refundAmount.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
                  placeholder="请输入应退回金额" />
      </el-form-item>
      <el-form-item label="应付金额(元)" prop="payableAmount" label-width="120px">
        <el-input v-model="form.payableAmount"
                  @input="form.payableAmount=form.payableAmount.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
                  :disabled='isdisabled' placeholder="请输入应付金额" />
      </el-form-item>
      <br>
      <el-form-item label="上传附件">
        <file-upload v-model="form.attachment" :is-disabled='isdisabled' :limit="5"/>
      </el-form-item>
    </el-form>
    <div
        v-show="parentTaskId===null&&confirmVisible"
        class="dialog-footer"
        style="text-align:center"
      >
        <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
        <el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm">提交</el-button>
      </div>
      <div
        v-show="parentTaskId==null&&!confirmVisible"
        class="dialog-footer"
        style="text-align:right"
      >
        <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
      </div>
      <!-- 工作流开始 -->
      <verify ref="verifyRef"
              :taskId="taskId"
              @submitCallback="submitCallback" :componentName="componentName"
              :taskVariables="taskVariables"
              :deptId="dept.deptId"
              :sendMessage="sendMessage"></verify>
  </div>
</template>

<script>
import {getFinanceTravel, getProjectList} from "@/api/oa/financeTravel";
import verify from "@/components/Process/Verify";
import {parseTime} from "@/utils/ruoyi";
export default {
  name: "FinanceTravelForm",
  dicts: ['travel_type'],
  components: {
      verify
  },
  props: {
      businessKey: String, // 业务唯一标识
      parentTaskId: String, // 父级任务id
      taskId: String, // 任务id
      confirmVisible:{
          type: Boolean,
          default: true
      }
  },
  data() {
    return {
      componentName: "差旅费报销申请",
      dept:"",
      applyList:[],
      isdisabled:true,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 表单参数
      form: {},
      title:"",
        projectNameList:[],
      // 表单校验
      rules: {
      },
        taskVariables: undefined,
        //消息提醒
        sendMessage: {},
        processKey: 'oa_finance_travel',
    };
  },
  watch: {
      businessKey: {
          immediate: true, // 很重要！！！
          handler (newVal) {
              if(newVal) {
                  this.getById()
              }
          }
      }
  },
  mounted() {
    if (this.$store.state.user.roles[0]=="common"||this.$store.state.user.roles[0]=="board"){
      this.dept=this.$store.state.user.dept?this.$store.state.user.dept:"";
    }
  },
  methods: {
    submitCallback(){
        this.$emit("closeForm")
    },
    async getById() {
      const {data} = await getFinanceTravel(this.businessKey)
      this.form = data;
      if (data.actBusinessStatus.createTime){
            this.form.numberNum="江苏华琛能源发展有限公司";
        }
      this.applyList = JSON.parse(data.applyList);
    },
    applaydeleteRow(index, rows) {
      rows.splice(index, 1);
    },
    /** 提交按钮 */
    submitForm() {
        getFinanceTravel(this.businessKey).then(response => {
            this.taskVariables = {
                entity: response.data,
                userRole: this.$store.state.user.roles[0]
            };
            this.sendMessage = {
          title: "差旅费申请审批提醒",
          messageContent: this.$store.state.user.nickName + "审批通过了差旅费申请"
        };

        });
        this.$refs.verifyRef.visible = true
        this.$refs.verifyRef.reset()
    },
    costTypeChange(){
      this.form.projectName=undefined;
      this.getProjectList();
    },
    getProjectList() {
      getProjectList().then(res => {
        this.projectNameList = res.data;
      });
    },
    applayaddRow(tableData1) {
      tableData1.push({
        specificationModel: "",
        smallLetter: "",
        attachmentNumbers: "",
        capitalization: "",
        xh: this.xh1,
        infoId: this.infoId
      });
    },
  }
};
</script>
<style scoped>
    /* 设置滚动条宽度和高度 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        width: 8px; /* 横向滚动条 */
        height: 8px; /* 纵向滚动条 必写 */
    }
    /* 设置滚动条样式 */
    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #dde;
        border-radius: 3px;
    }
    #selectForm >>> .el-form-item__label {
        font-size: 12px;
    }
    ::v-deep .bjsm .el-form-item__content{
        width: calc(100% - 130px) !important;
    }
</style>
